<template>
  <div class="app-container">
    <search @seach="seach" :searchtype="1"></search>
    <div class="table-box">
      <Tables :data="list" :listLoading="listLoading" :tableTitle="tableTitle"  v-on:opendetails="opendetails"></Tables>
      <Pagations :totalCount="totalCount" @changePage="changePage"></Pagations>
    </div>
    <DeviceDetails
      :showdetails.sync="showdetails"
      :devicerow="devicerow"
      :driverow="driverow"
      :overspeedrow="overspeedrow"
      :driving="driving"
      :overspeed="overspeed"
      :warning="warning"
      :ChangeRecord="ChangeRecord"
      :loading="loading"
      v-on:changeModalPage="changeModalPage"
    ></DeviceDetails>
    <Modal  :show.sync="show" :row="row" :type="type"  v-on:submit="submit" v-on:close="close" ></Modal>
  </div>
</template>

<script>

  import { queryTrackerForm } from '@/api/list'
  import { modifyTracker } from '@/api/request'
  import search from  '../devicetable/search'
  import Pagations from '@/components/pagations'
  import pagationdata from '@/mixins/pagations'
  import deviceDetails from '@/mixins/devicedetails'
  import DeviceDetails from '../devicetable/devicedetails'
  import Modal from  './modal'
  import Tables from  '@/components/table'
  import Option from '@/components/table/option'

  export default {
    mixins: [pagationdata,deviceDetails],
    name:'DeviceAdmin',
    data() {
      return {
        show:false,
        row:{},
        type:1,
        tableTitle:[{
          title:'设备编号',
          prop:'trackerId',
          width:'180px'
        },{
          title:'IMEI号',
          prop:'imei',
          width:'200px'
        }, {
          title:'设备状态',
          prop:'signalStatusStr',
          width:'100px'
        },{
          title:'报警状态',
          prop:'statusStr',
          width:'100px'
        },{
          title:'绑定时间',
          prop:'bindTimeStr',
          width:'200px'
        }, {
          title:'手机号',
          prop:'telephone',
          width:'180px'
        },{
          title:'使用人',
          prop:'userName'
        },{
          title:'通信卡号',
          prop:'sim',
          width:'230px'
        },{
          prop: "",
          title: "操作",
          width:'300px',
          render: (h, param) => {
            const optionData = {
              title: "操作",
              items: [
                { label: "修改", func: { func: "openedit", uuid: param.row },id:param.row.binding==1?1:0 },
                { label: "解绑", func: { func: "unbind", uuid: param.row },id:param.row.binding==1?1:0 },
                { label: "换绑", func: { func: "openchange", uuid: param.row },id:param.row.binding==1?1:0 },
                { label: "绑定", func: { func: "openbind", uuid: param.row },id:param.row.binding==0?1:0 },
                { label: "设备详情", func: { func: "opendetails", uuid: param.row },id:1},
                { label: "远程断电", func: { func: "closepower", uuid: param.row },id:1}
                ]
            };

            return h(Option, {
              props: { optionData: optionData },
              on: {
                openedit: this.openedit,
                unbind: this.unbind,
                openchange: this.openchange,
                openbind: this.openbind,
                opendetails: this.opendetails,
                closepower: this.closepower
              }
            });
          }
         }]
      }
    },
    components:{
      search,
      Pagations,
      DeviceDetails,
      Modal,
      Tables
    },
    filters: {

    },
    created() {
      this.fetchData(this.listQuery)
    },
    methods: {
      seach(data){
        this.formline=data
        this.fetchData(data)
      },
      changePage: function(val) {
        this.fetchData({
          pageSize: 10,
          currentPage: val,
          ...this.formline
        })
      },
      fetchData(data) {
        this.listLoading = true
        queryTrackerForm(data).then(response => {
          if(response && response.body){
            this.list = response.body.trackerList
            this.totalCount = response.body.count
          }else {
            this.list = []
            this.totalCount = 0
          }
          this.listLoading = false
        })
      },
      opendetails(row){
        this.showdetails=true
        this.trakcerId=row.trackerId
        this.trakerDetail(row.trackerId,this.drivingquery)
      },
      openedit(row){
        this.show=true
        this.row=row
        this.type=1
      },
      openchange(row){
        this.show=true
        this.row=row
        this.type=2
      },
      openbind(row){
        this.show=true
        this.row=row
        this.type=3
      },
      submit({ formName, formInline }){
        formName.validate((valid) => {
          if (valid) {
            this.show = false
            this.formline={}
            if(this.type===1){
              modifyTracker({...formInline,operator:'modify'}).then(response => {
                this.fetchData(this.listQuery)
              })
            }else if(this.type===2){
              formInline.telephone=formInline.newtelephone
              modifyTracker({...formInline,operator:'change'}).then(response => {
                this.fetchData(this.listQuery)
              })
            }else {
              modifyTracker({...formInline,operator:'bind'}).then(response => {
                this.fetchData(this.listQuery)
              })
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      close(formName) {
        this.show = false
        formName.resetFields()
      },
      unbind(row){
        this.$confirm('确定解绑?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          modifyTracker({trackerId:row.trackerId,operator:'unbind'}).then(response => {
            this.fetchData(this.listQuery)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消解绑'
          })
        })
      },
      closepower(row){
        this.$confirm('确定远程断电?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log('待定')
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消远程断电'
          })
        })
      }
    }
  }
</script>
